/* 响应式工具类 */

/* 断点定义 */
:root {
  --breakpoint-xs: 480px;
  --breakpoint-sm: 768px;
  --breakpoint-md: 1024px;
  --breakpoint-lg: 1200px;
  --breakpoint-xl: 1440px;
}

/* 隐藏/显示工具类 */
.hidden-xs {
  display: none !important;
}

.hidden-sm {
  display: none !important;
}

.hidden-md {
  display: none !important;
}

.hidden-lg {
  display: none !important;
}

.visible-xs {
  display: block !important;
}

.visible-sm {
  display: block !important;
}

.visible-md {
  display: block !important;
}

.visible-lg {
  display: block !important;
}

/* 响应式显示 */
@media (max-width: 480px) {
  .hidden-xs {
    display: none !important;
  }
  
  .visible-xs {
    display: block !important;
  }
  
  .hidden-sm,
  .hidden-md,
  .hidden-lg {
    display: block !important;
  }
  
  .visible-sm,
  .visible-md,
  .visible-lg {
    display: none !important;
  }
}

@media (min-width: 481px) and (max-width: 768px) {
  .hidden-sm {
    display: none !important;
  }
  
  .visible-sm {
    display: block !important;
  }
  
  .hidden-xs,
  .hidden-md,
  .hidden-lg {
    display: block !important;
  }
  
  .visible-xs,
  .visible-md,
  .visible-lg {
    display: none !important;
  }
}

@media (min-width: 769px) and (max-width: 1024px) {
  .hidden-md {
    display: none !important;
  }
  
  .visible-md {
    display: block !important;
  }
  
  .hidden-xs,
  .hidden-sm,
  .hidden-lg {
    display: block !important;
  }
  
  .visible-xs,
  .visible-sm,
  .visible-lg {
    display: none !important;
  }
}

@media (min-width: 1025px) {
  .hidden-lg {
    display: none !important;
  }
  
  .visible-lg {
    display: block !important;
  }
  
  .hidden-xs,
  .hidden-sm,
  .hidden-md {
    display: block !important;
  }
  
  .visible-xs,
  .visible-sm,
  .visible-md {
    display: none !important;
  }
}

/* 响应式文本 */
.text-responsive {
  font-size: 1rem;
}

@media (max-width: 768px) {
  .text-responsive {
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .text-responsive {
    font-size: 0.8rem;
  }
}

/* 响应式间距 */
.p-responsive {
  padding: 1rem;
}

@media (max-width: 768px) {
  .p-responsive {
    padding: 0.75rem;
  }
}

@media (max-width: 480px) {
  .p-responsive {
    padding: 0.5rem;
  }
}

.m-responsive {
  margin: 1rem;
}

@media (max-width: 768px) {
  .m-responsive {
    margin: 0.75rem;
  }
}

@media (max-width: 480px) {
  .m-responsive {
    margin: 0.5rem;
  }
}

/* 响应式网格 */
.grid-responsive {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 1rem;
}

@media (max-width: 768px) {
  .grid-responsive {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .grid-responsive {
    gap: 0.5rem;
  }
}

/* 响应式弹性布局 */
.flex-responsive {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

@media (max-width: 768px) {
  .flex-responsive {
    flex-direction: column;
    gap: 0.75rem;
  }
}

@media (max-width: 480px) {
  .flex-responsive {
    gap: 0.5rem;
  }
}

/* 响应式表格 */
.table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.table-responsive table {
  min-width: 600px;
}

@media (max-width: 768px) {
  .table-responsive table {
    min-width: 500px;
    font-size: 0.9rem;
  }
}

@media (max-width: 480px) {
  .table-responsive table {
    min-width: 400px;
    font-size: 0.8rem;
  }
}
